<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>外边距塌陷</title>
		<style type="text/css">
			div {
				width: 100px;
				height: 100px;
				background: red;
			}
			.div1 {
				margin-bottom:30px;
			}
			.div2 {
				margin-top:10px;
			}
			.div3 {
				width: 300px;
				height: 300px;
			}
			.div4 {
				background: yellow;
				margin-top: 40px;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			1
		</div>
		<div class="div2">2</div>
		<hr />
		<div class="div3">
			<div class="div4">外层加padding或者border或者overflow可以防止</div>
		</div>
		<p style="margin-bottom: 0px;">这个段落的和下面段落的距离将为20px</p>

<div style="width：auto;height:auto;margin-top: 20px; margin-bottom: 20px;"></div>

<p style="margin-top: 0px;">这个段落的和上面段落的距离将为20px</p>
	</body>
</html>
